<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div
    class="CommentList"
    v-loading="loading2"
    element-loading-text="Loading..."
    :element-loading-spinner="svg"
    element-loading-svg-view-box="-10, -10, 50, 50"
    style="width: 100%"
  >
    <template v-if="CommentList.length>0">
      <div class="infinite-list-wrapper">
        <!-- <ul
          v-infinite-scroll="load1"
          class="list1"
          :infinite-scroll-disabled="disabled1"
          style="overflow:visible"
        >-->
        <li v-for="item in CommentList" :key="item" class="list-item1">
          <div class="review_img">
            <img src="../../../assets/img/review/medium.png" />
          </div>

          <div class="review_info">
            <div class="review_header">
              <div class="review_title">
                <p class="user_info1">{{ item.COMMENT_USER }}</p>
                <p class="user_info2">发布于{{ item.COMMENT_TIME }}</p>
              </div>
              <div class="review_location">
                IP:
                {{ item.COMMENT_IP_ADD }}
              </div>
            </div>
            <div class="review_content">{{ item.COMMENT }}</div>
            <div class="review_footer">
              <div class="box1">评分：{{ item.COMMENT_GRADE?item.COMMENT_GRADE:'该用户暂未评分' }}</div>
              <div class="box2">{{ item.COMMENT_EVALUATEM }}</div>
            </div>
          </div>
        </li>
      </div>
      <el-button type="primary" :loading-icon="Eleme" @click="load1" :loading="loading1">加载更多</el-button>
    </template>
    <template v-else>
      <div class="empty_box">
        <el-empty description="空" :image-size="200">当前景点无评论</el-empty>
      </div>
    </template>
  </div>
</template>
    
    <script setup lang="ts">
import { Eleme } from "@element-plus/icons-vue";
const loading2 = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
import { getComm_Medium_Eevaluate } from "@/request/analysis";
let CommentList = ref([]);
let page = ref(1);
const count = ref(10);
const loading1 = ref(false);
const noMore = computed(() => count.value >= 20);
const disabled1 = computed(() => loading1.value || noMore.value);
const load1 = async () => {
  loading1.value = true;
  page.value += 1;
  await getComm_Medium_Eevaluate({
    list_id: props.review_id,
    page: page.value
  }).then(res => {
    let { data, status, message } = res;
    // console.log(res);
    if (status == 201) {
      ElMessage({
        message: message,
        type: "warning"
      });
    } else {
      data.forEach(item => {
        CommentList.value.push(item);
      });
    }
    loading1.value = false;
  });
};
const props = defineProps<{
  review_id: String;
}>();
const get_data = async (item: any) => {
  page.value = 1;
  loading2.value = true;
  await getComm_Medium_Eevaluate({
    list_id: item,
    page: page.value
  }).then(({ data }) => {
    CommentList.value = data;
    console.log("好评：CommentList.value", CommentList.value);
    loading2.value = false;
  });
};
// const parent: any = ref(props.name);
watch(
  () => props.review_id,
  (newValue, oldValue) => {
    if (newValue) {
      get_data(newValue);
    }
  }
);
</script>
<style lang="scss" scoped>
.CommentList {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  list-style: none;
  // width: 100%;
  // background-color: aqua;
  .infinite-list-wrapper {
    height: calc(42vh - 60px);
    overflow-y: scroll;
    // width: 100%;
    // width: 100%;
    .list-item1 {
      height: auto;
      overflow-y: hidden;
      background-color: white;
      // border: 5px solid rgb(0, 238, 255);
      margin-bottom: 3px;
      // line-height: 10px;
      // width: 100% ;
      display: flex;
      .review_img {
        flex: 1;
        img {
          width: 70px;
        }
      }
      .review_info {
        padding-top: 15px;
        flex: 5;
        // background-color: rgb(255, 255, 255);
        .review_header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
          height: 30px;
          // background-color: aquamarine;
          .review_title {
            width: 45%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            // background-color: azure;
            .user_info1 {
              font-weight: 900;
            }
            .user_info2 {
              font-size: 10px;
            }
          }
          .review_location {
            width: 20%;
            font-size: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            // background-color: azure;
          }
        }
        .review_content {
          margin: 0 auto;
          width: 90%;
          // background-color: aquamarine;
        }
        .review_footer {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
          height: 30px;
          .box1 {
            padding-top: 10px;
            width: 270px;
            font-size: 11px;
            // background-color: aqua;
          }
          .box2 {
            padding-top: 10px;
            font-size: 11px;
            width: 70px;
            // background-color: aqua;
          }
        }
      }
    }
  }
}
</style>